<template>
  <div class="">
    <div class="py-4 flex justify-center bg-white">
      <div class="w-72">
        <img class="w-full" src="../../../assets/images/dtu.png" alt="" />
        <div class="flex justify-around items-center">
          <span> {{ dtu.name }} </span>
          <a-button @click="onEdit" type="link">设置</a-button>
          <a-button @click="onAddHub" type="link">添加采集器</a-button>
        </div>
      </div>
    </div>

    <div class="mt-4 flex flex-nowrap justify-around space-x-4">
      <this-hub
        v-for="item in dtu.gatherDeviceList"
        :key="item.id"
        :hub="item"
        @updated="$emit('updated')"
        @on-delete="$emit('on-delete', $event)"
      />
    </div>

    <dtu-modal ref="dtuM" @updated="$emit('updated', $event)" />

    <hub-modal ref="hubM" @updated="$emit('updated', $event)" />
  </div>
</template>

<script>
import thisHub from './hub.vue';
import dtuModal from './modal/dtu.vue';
import hubModal from './modal/hub.vue';

export default {
  props: ['dtu'],
  components: { thisHub, dtuModal, hubModal },
  created() {
    // console.log(this.dtu.gatherDeviceList, 222222);
  },
  methods: {
    onEdit() {
      this.$refs.dtuM.open(this.dtu);
    },
    onAddHub() {
      this.$refs.hubM.open({
        projectId: this.dtu.projectId,
        dtuId: this.dtu.id,
        no: '',
        name: '',
        address: '',
        gatherDeviceTypeId: '',
        companyId: '',
      });
    },
  },
};
</script>

<style>
</style>